<template>
  <!-- 发货管理 -->
  <div class="incolumn">
    <div class="incolumn_countr">
      <div class="block">
        <el-form :inline="true" :model="Pagination" class="demo-form-inline">
          <el-form-item label="输入搜索" class="s1">
            <el-input v-model="Pagination.key" placeholder="请输入快递单号" style="width:150%"></el-input>
          </el-form-item>
          <el-form-item label="输入时间" label-width="230px">
            <el-date-picker
              v-model="formInline.time1"
              type="daterange"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              @change="chage"
            ></el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onsubmit">查询</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="incolumn_from">
      <el-table
        :data="tableData_DELIVERY"
        style="width: 100%;background-color:#fff"
        :height="autoHeightTable"
        stripe
      >
        <el-table-column label="序号" align="center" type="index" width="170"></el-table-column>
        <el-table-column label="来源" align="center" width="170">
          <template v-slot="scope">
            <span v-if="scope.row.genre==1">销售订单</span>
            <span v-if="scope.row.genre==2">站点维保</span>
          </template>
        </el-table-column>
        <el-table-column prop="clientName" label="企业/站点名称" align="center">
        </el-table-column>
        <el-table-column label="申请日期" align="center">
          <template v-slot="scope">
            <div>{{ renderTime(scope.row.createTime) }}</div>
          </template>
        </el-table-column>
        <el-table-column label="状态" align="center">
          <template v-slot="scope">
            <span v-if="scope.row.status==1">待发货</span>
            <span v-else-if="scope.row.status==2">已发货</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button v-if="scope.row.status==1" type="primary"  size="small"
                       @click="showDetail(scope.row.id,isDetail=false)">发 货
            </el-button>
            <el-button type="text" size="small" @click="showDetail(scope.row.id,isDetail=true)">明 细</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="bottom_slate">
        <el-pagination
          background
          layout="prev, pager, next"
          :current-page="Pagination.current"
          :page-size="Pagination.pagesize"
          @current-change="handleCurrentChange"
          :page-count="Pagination.total"
        ></el-pagination>
      </div>
      <!--============弹框==================-->
      <el-dialog
        append-to-body
        :visible.sync="dialogVisible_LogisticsOrder"
        width="60%"
      >
        <span style="font-weight: 700;font-style: normal;font-size: 16px;color: #17233D;">{{ title }}</span>
        <div style="width: 100%;border-top: 1px solid rgb(237, 239, 240);margin-top: 15px">
          <el-form :inline="true" :model="form_client" class="demo-form-inline" style="margin-top: 5px">
            <el-form-item label="企业/站点名称">
              <el-input disabled v-model="form_client.clientName"></el-input>
            </el-form-item>
            <el-form-item label="收货人">
              <el-input disabled v-model="form_client.contactPerson"></el-input>
            </el-form-item>
            <el-form-item label="联系方式">
              <el-input disabled v-model="form_client.contactPhone"></el-input>
            </el-form-item>
            <el-form-item label="收货地址">
              <el-input disabled v-model="form_client.clientAddress"></el-input>
            </el-form-item>
<!--            <el-form-item label="发货日期">
              <el-input disabled v-model="form_client.fahuoTime"></el-input>
            </el-form-item>-->
            <el-form-item label="订单编号">
              <el-input disabled v-model="form_client.orderNumber"></el-input>
            </el-form-item>
          </el-form>
        </div>
        <span style="font-weight: 700;font-style: normal;font-size: 14px;color: #17233D;">运输方式：</span>
        <el-radio :disabled="isDetail" v-model="radio_way" label="1" @change="resetStatue">快递</el-radio>
        <el-radio :disabled="isDetail" v-model="radio_way" label="2" @change="resetStatue">物流</el-radio>
        <div style="width: 100%;border-top: 1px solid rgb(237, 239, 240);margin-top: 15px">
          <el-form v-show="radio_way!=''" :inline="true" :model="form_expressDelivery" class="demo-form-inline" style="margin-top: 5px">
            <el-form-item label="快递公司">
              <el-input style="width: 100px" :disabled="isDetail"
                        v-model="form_expressDelivery.wuliuName"></el-input>
            </el-form-item>
            <el-form-item v-show="radio_way==1">
              <!--<el-input style="width: 170px"  v-model="form_LOGISTICS.wuliuNumber"></el-input>-->
              <el-tag
                :key="tag"
                v-for="tag in dynamicTack"
                closable
                :disable-transitions="false"
                @close="handleClose(tag)">
                {{ tag }}
              </el-tag>
              <el-input
                class="input-new-tag"
                v-if="inputVisible"
                v-model="inputValue_Tack"
                ref="saveTagInput"
                size="small"
                @keyup.enter.native="handleInputConfirm"
                @blur="handleInputConfirm"
              >
              </el-input>
              <el-button :disabled="isDetail" v-else class="button-new-tag" size="small" @click="showInput">+ 快递单号
              </el-button>
            </el-form-item>
            <el-form-item v-show="radio_way==2" label="车牌号">
              <el-input :disabled="isDetail" style="width: 100px" v-model="form_expressDelivery.carNumber"></el-input>
            </el-form-item>
            <el-form-item v-show="radio_way==2" label="司机姓名">
              <el-input :disabled="isDetail" style="width: 100px" v-model="form_expressDelivery.driver"></el-input>
            </el-form-item>
            <el-form-item v-show="radio_way==2" label="司机联系方式">
              <el-input :disabled="isDetail" v-model="form_expressDelivery.drivarPhone"></el-input>
            </el-form-item>
          </el-form>
        </div>
        <span style="font-weight: 700;font-style: normal;font-size: 14px;color: #17233D;">货物信息：</span>
        <div style="width: 100%;border-top: 1px solid rgb(237, 239, 240);margin-top: 15px">
          <el-table
            :data="tableData_GOODSINFO"
            style="width: 100%;height: 250px" :max-height="250">
            <el-table-column
              type="index"
              label="序号"
              align="center"
              width="120">
            </el-table-column>
            <el-table-column
              prop="productNumber"
              label="产品图号" align="center"
              width="180">
            </el-table-column>
            <el-table-column
              prop="productName" align="center"
              label="产品名称">
            </el-table-column>
            <el-table-column
              align="center"
              label="库存量">
              <template v-slot="scope">
                <div>{{ scope.row.kucun == null ? 0 : scope.row.kucun }}</div>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              label="本次发货数量">
              <template v-slot="scope">
                <div>{{ scope.row.number == null ? 0 : scope.row.number }}</div>
              </template>
            </el-table-column>
            <!--            <el-table-column
                          prop="number" align="center"
                          label="订单总量">
                        </el-table-column>
                        <el-table-column
                          prop="chengpinkuNumber" align="center"
                          label="已发货数量">
                        </el-table-column>
                        <el-table-column
                          prop="feipinkuNumber" align="center"
                          label="本次发货数量">
                        </el-table-column>-->
          </el-table>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button v-if="isDetail==false" type="primary" @click="confirm()">确 认</el-button>
          <el-button type="info" @click="dialogVisible_LogisticsOrder = false">取 消</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import axios from "axios";

export default {
  inject: ['reload'],
  components: {},
  computed: {
    autoHeightTable() {
      return document.documentElement.scrollHeight - 251 - 77
    }
  },
  data() {
    return {
      /**************************数据列表**********************************/
      title: "",
      inputVisible: false,
      inputValue_Tack: '',
      dynamicTack: [],//动态
      isDetail: false,
      tableData_DELIVERY: [],
      formInline: {},
      form_client: {},//客户信息
      tableData_GOODSINFO: [],//货物信息
      form_expressDelivery: {wuliuName: "", carNumber: "", drivarPhone: "", driver: ""},//物流公司信息
      radio_way: "",//运输方式1 快递； 2 物流
      /**********************************分页数据对象***************************************/
      Pagination: {
        beginTime: "",
        endTime: "",
        key: "",
        total: 1,//总共页
        current: 1,//当前页
        pagesize: 10,//页面数据个数
      },
      /*********************************弹框*************************************************/
      dialogVisible_LogisticsOrder: false,
    };
  },
  created() {
    this.getList();
  },
  methods: {
    //确认发货
    confirm() {
      let param={
        "carNumber": this.form_expressDelivery.carNumber,
        "clientId": null,
        "clientMessage": null,
        "clientName": this.form_client.enterpriseName,
        "companyDetails": null,
        "createTime": null,
        "drivarPhone": this.form_expressDelivery.drivarPhone,
        "driver": this.form_expressDelivery.driver,
        "fahuoTime": null,
        "genre": this.form_client.genre,
        "id": this.form_client.id,
        "orderNumber": null,
        "salesofId": null,
        "shenghemessageId": null,
        "status": null,
        "type": parseInt(this.radio_way),
        "warehouseLogs": null,
        "wuliuName": this.form_expressDelivery.wuliuName,
        "wuliuNumber": this.dynamicTack.toString()
      }
      console.log(param)
      // return
      if (this.radio_way=="") {
        this.$message.error("请选择运输方式");
        return
      }
      let flag=0
      this.tableData_GOODSINFO.forEach(e=>{
        if (Number(e.kucun)<Number(e.number)) {
          flag=1;
          return;
        }
      })
      if (flag==1) {
        this.$message.error("当前发货数大于库存数");
        return;
      }
      axios.post("/JX_java/warehouse/ApplyShipments", param).then(res => {
        console.log(res.data.data);
        if (res.data.data == "操作成功") {
          this.$message.success(res.data.data);
          this.dialogVisible_LogisticsOrder = false;
          this.reload();
        } else {
          this.$message.error(res.data.data);
        }
      });

    },
    resetStatue(){//form_expressDelivery.carNumber
      this.form_expressDelivery.wuliuName=""
      this.form_expressDelivery.carNumber=''
      this.form_expressDelivery.driver=''
      this.form_expressDelivery.drivarPhone=''
      this.inputValue_Tack=''
      this.dynamicTack=[]
    },
    showDetail(id, statue) {
      this.dialogVisible_LogisticsOrder = true;
      if (statue == true) {
        this.title = "明细";
      } else {
        this.title = "生成物流单";
      }
      axios.get("/JX_java/sales/fahuoGuanli/getFahuoLog?id=" + id).then(res => {
        console.log(res.data.data,"嘻嘻嘻嘻嘻嘻")
        this.form_client.genre=res.data.data.genre
        this.form_client.id = res.data.data.id
        this.form_client.clientName = res.data.data.companyDetails.clientName
        this.form_client.contactPerson = res.data.data.companyDetails.contactPerson
        this.form_client.contactPhone = res.data.data.companyDetails.contactPhone
        this.form_client.clientAddress = res.data.data.companyDetails.clientAddress
        this.form_client.fahuoTime = res.data.data.fahuoTime
        this.form_client.orderNumber = res.data.data.orderNumber
        this.radio_way = res.data.data.type == null ? "" : res.data.data.type.toString();
        this.form_expressDelivery.wuliuName = res.data.data.wuliuName == null ? "" : res.data.data.wuliuName
        this.dynamicTack = res.data.data.wuliuNumber == null ? [] : res.data.data.wuliuNumber.split(",");//
        this.form_expressDelivery.carNumber = res.data.data.carNumber
        this.form_expressDelivery.drivarPhone = res.data.data.drivarPhone
        this.form_expressDelivery.driver = res.data.data.driver
        this.tableData_GOODSINFO = res.data.data.warehouseLogs
      })


    },
    //添加快递单号
    handleClose(tag) {
      this.dynamicTack.splice(this.dynamicTack.indexOf(tag), 1);
    },
    showInput() {
      this.inputVisible = true;
      this.$nextTick(_ => {
        this.$refs.saveTagInput.$refs.input.focus();
      });
    },
    handleInputConfirm() {
      let inputValue_Tack = this.inputValue_Tack;
      console.log(inputValue_Tack)
      if (inputValue_Tack) {
        this.dynamicTack.push(inputValue_Tack);
      }
      this.inputVisible = false;
      this.inputValue_Tack = '';
    },

    //格式化时间
    renderTime(date) {
      return date==null?"":date.substring(0, 10);
    },
    handleCurrentChange(e) {
      this.Pagination.current = e
      this.getList();
    },
    //获取页面数据
    getList: function () {
      let params = {
        "beginTime": this.Pagination.beginTime,
        "endTime": this.Pagination.endTime,
        "key": this.Pagination.key,
        "pageNum": this.Pagination.current,
        "pageSize": this.Pagination.pagesize,
        "type": 0
      }
      let message = JSON.parse(localStorage.getItem("message"));
      axios.post("/JX_java/warehouse/warehouse/getFahuoLog?userId=" + message.Id, params).then(res => {
        console.log(res.data.data, res.data.data.totalPages)
        this.tableData_DELIVERY = res.data.data.content
        this.Pagination.total = res.data.data.totalPages
      })
    },
    chage(e) {
      if (e) {
        this.Pagination.beginTime = e[0];
        this.Pagination.endTime = e[1];
      } else {
        this.Pagination.beginTime = '';
        this.Pagination.endTime = '';
      }
    },
    onsubmit() {
      this.getList();
    },
  }
};
</script>

<style lang="scss" scoped>
@import "@/assets/scss/base.scss";

.Suppliermanagement .search {
  height: 50px;
  border-radius: 5px;
  background-color: #fff;
  padding-left: 20px;
  padding-top: 10px;
  margin: 0 20px 20px;
}

.Suppliermanagement .demo-form-inline {
  display: inline-block;
}

.Suppliermanagement .el-pagination {
  margin-top: 15px;
  text-align: center;
}

.Suppliermanagement .ebtn {
  float: right;
  margin-right: 20px;
}

.bottom_slate {
  height: 60px;
  line-height: 40px;
  text-align: center;
}
</style>
